<template>
  <a-modal
    v-model:visible="modalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
    width="800px"
  >
    <template #title>
      {{ `${modelkey === 1 ? '常用' : '全部'}供应商列表` }}
    </template>
    <div>
      <div class="search">
        <a-input-search
          search-button
          @press-enter="tableRef.loadData()"
          style="width: 200px; margin: 0 20px"
          v-model="keyWord"
        ></a-input-search>
        <a-space>
          <a-button
            type="outline"
            @click="
              () => {
                keyWord = '';
                tableRef.loadData();
              }
            "
          >
            <template #icon>
              <icon-loop />
            </template>
            <template #default>重置</template>
          </a-button>
        </a-space>
      </div>
      <tableTurn
        :args="{
          rowSelection: {
            type: 'radio',
            showCheckedAll: true,
          },
          bordered: {
            headerCell: true,
          },
          stripe: true,
        }"
        style="padding: 0px 10px"
        :tableData="getData"
        ref="tableRef"
      >
        <a-table-column :width="70" align="center">
          <template #title> 序号 </template>
          <template #cell="{ rowIndex }">
            {{ rowIndex + 1 }}
          </template>
        </a-table-column>
        <a-table-column
          title="供应商编号"
          :data-index="modelkey === 1 ? 'supplierNumber' : 'number'"
          align="center"
          :width="200"
          :ellipsis="true"
          :tooltip="{
            position: 'top',
          }"
        />
        <a-table-column
          title="供应商名称"
          :data-index="modelkey === 1 ? 'supplierName' : 'name'"
          align="center"
          :width="200"
          :ellipsis="true"
          :tooltip="{
            position: 'top',
          }"
        />
        <a-table-column
          title="供应商级别"
          :width="200"
          :data-index="modelkey === 1 ? 'supplierLevelName' : 'supLevelName'"
          align="center"
        />
        <a-table-column
          v-if="modelkey === 1"
          title="产品名称"
          data-index="name"
          align="center"
          :width="200"
          :ellipsis="true"
          :tooltip="{
            position: 'top',
          }"
        />
        <a-table-column
          v-if="modelkey === 1"
          title="产品单价"
          data-index="singlePrice"
          align="center"
          :width="200"
          :ellipsis="true"
          :tooltip="{
            position: 'top',
          }"
        />
        <a-table-column
          v-if="modelkey === 1"
          title="单价单位"
          data-index="singleUint"
          align="center"
          :width="200"
          :ellipsis="true"
          :tooltip="{
            position: 'top',
          }"
        />

        <!-- <a-table-column title="状态" data-index="state" align="center"
      ><template #cell="{ record }">
        <div
          class="status"
          :style="{
            color: orderStatus.filter((ele) => ele.id === record.state)[0]
              ?.backgroundColor,
          }"
        >
          <p
            :style="{
              'background': orderStatus.filter(
                (ele) => ele.id === record.state
              )[0]?.backgroundColor,
              'box-shadow': `0px 0px 5px`,
            }"
          ></p>
          {{ orderStatus.filter((ele) => ele.id === record.state)[0]?.value }}
        </div></template
      ></a-table-column
    > -->
      </tableTurn>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { cloneDeep } from 'lodash';
  import { reactive, computed, watchEffect, onMounted, ref } from 'vue';
  import { localGetUserInfo } from '@/utils/localStorage/account';
  import { getPurchaseProductNumber } from '@/api/buy-management/buy-material/index';
  import { GetSupplierPrimaryList } from '@/api/buy-management/supplier-management/supplier-primary-list/index';

  const props = withDefaults(
    defineProps<{
      code: any;
      visible: boolean;
      modelkey: number;
    }>(),
    {
      visible: false,
    }
  );

  const args = {
    bordered: {
      headerCell: true,
    },
    stripe: true,
  };

  const rowSelection = reactive({
    type: 'radio',
  });
  const keyWord = ref();
  const data = ref([]);
  const selectedKeys = ref([]);
  // 获取数据
  const getData = async (page) => {
    try {
      let msg = {};
      if (keyWord.value) msg.name = keyWord.value;
      if (props.modelkey === 1) {
        const res = await getPurchaseProductNumber({
          number: props.code,
          ...msg,
        });
        return Promise.resolve(res);
        // data.value = res;
      } else {
        const res = await GetSupplierPrimaryList({ ...page, ...msg });
        return Promise.resolve(res);
      }
    } catch (error: unknown) {
      console.log(error);
    }
  };
  const tableRef = ref();
  const columns = [
    {
      title: '物料指导单价',
      code: 'singlePrice',
    },

    {
      title: '供应商编号',
      code: 'supplierNumber',
    },
    {
      title: '供应商名称',
      code: 'supplierName',
    },
    {
      title: '供应商级别',
      code: 'supplierLevelName',
    },
    {
      title: '产品认证情况',
      code: 'authState',
    },
  ];

  const emit = defineEmits(['update:visible', 'awardedSupplier']);

  // 判断用户是否显示弹出框
  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emit('update:visible', visible, '');
    },
  });

  const SelectDate = ref([]);
  const onSelect = (e: number, keys: number, val: any) => {
    SelectDate.value[0] = val;
  };

  watchEffect(() => {
    if (props.visible) {
      selectedKeys.value = [];
      SelectDate.value = [];
    }
  });

  const handleOk = () => {
    emit('awardedSupplier', tableRef.value.selectedList);
  };
</script>

<style scoped lang="less">
  :deep(.arco-table-tr) {
    height: 40px;
  }
  :deep(.arco-table-th) {
    font-weight: bold;
    // font-size: 13px;
  }

  .search {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
  }
</style>
